<template>
  <div class="search-input">
    <el-input
      placeholder="搜索..."
      prefix-icon="el-icon-search"
      v-model="inputValue"
      @keyup.enter.native="searchValue"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  name: "SearchInput",
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    searchValue() {
      this.$emit("searchResult", this.inputValue);
    },
  },
};
</script>
<style lang="scss">
.el-input {
  .el-input__inner {
    padding-left: 80px;
    width: 492px;
    height: 64px;
    line-height: 64px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dae5ff;
    font-size: 16px;
  }

  .el-input__prefix {
    cursor: pointer;
    top: 16px;
    left: 30px;
    width: 28px;
    height: 28px;

    .el-input__icon {
      color: #dae5ff;
      font-size: 28px;
      font-weight: bold;
    }
  }
}
</style>
